いちナレッジサイトにおける MkDocs および Material for MkDocs の 設定まとめ【静的サイトジェネレータ】

site_name: MkLorum
nav:
  - Home: index.md
  - About: about.md

site_name: Example Guidebook
site_url: https://guidebook.example.com/

repo_url: https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
repo_name: HOGE
edit_uri: edit/develop/docs/

nav:
  - Home: index.md
  - User Guide:
    - Writing your docs: writing-your-docs.md
    - Styling your docs: styling-your-docs.md
  - About:
    - License: license.md
    - Release Notes: release-notes.md

theme:
  name: material

theme:
  logo: image/logo.png

theme:
  favicon: image/favicon.ico

theme:
  lang: ja

theme:
  palette:
    primary: brown

theme:
  palette:

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      primary: blue
      scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      primary: blue grey
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

theme:
  features:
    - navigation.sections

theme:
  features:
    - content.code.copy

theme:
  # overrides ディレクトリに拡張(上書き)したいアセットを配置します。
  custom_dir: overrides

markdown_extensions:
  - toc:
      toc_depth: 2-3

markdown_extensions:
  - admonition
  - pymdownx.details

!!! note

    For full documentation visit [mkdocs.org](https://www.mkdocs.org).

??? note

    For full documentation visit [mkdocs.org](https://www.mkdocs.org).

markdown_extensions:
  - footnotes

くらにゃん[^1]に聞いてみました。

[^1]: クラスメソッドのマスコットキャラクター

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

!!! note
    ```python
    import foo.bar
    ```

```mermaid
flowchart LR
    Start --> Stop
```

markdown_extensions:
  - attr_list

![img](./image/cm-logo.png){width="50%"}

![img](./image/cm-logo.png){width="20%"}

markdown_extensions:
  - attr_list
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg

:motorcycle: :dash:

markdown_extensions:
  - md_in_html

<div class="grid cards" markdown>

- :fontawesome-brands-html5: __HTML__ for content and structure
- :fontawesome-brands-js: __JavaScript__ for interactivity
- :fontawesome-brands-css3: __CSS__ for text running out of boxes
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?

</div>

plugins:
  - tags

---
tags:
  - AAA
  - BBB
  - CCC
---

# Welcome to MkDocs

plugins:
  - search:
      lang: ja

plugins:
  - git-revision-date-localized:
      # MKDOCS_CI 環境変数が true にセットされていた場合にプラグインが有効
      enabled: !ENV [MKDOCS_CI, false]
      enable_creation_date: true

plugins:
  - print-site:
      enumerate_headings: false

markdown_extensions:
  - tables
extra_javascript:
  - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js
  - javascripts/tablesort.js

document$.subscribe(function() {
  var tables = document.querySelectorAll("article table:not([class])")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

copyright: "© Classmethod, Inc."

extra_css:
  - stylesheets/extra.css

/* 例: H1見出しのデザインを変更 */
.md-typeset h1 {
  font-weight: bold;
  border-bottom: solid 5px #1AB394;
  padding-bottom: 5px;
}

extra:
  analytics:
    provider: google
    property: G-XXXXXXXXXX

extra:
  social:
    - icon: fontawesome/solid/paper-plane
      link: https://example.com/feedback
      name: お問い合わせフォーム